import type { FC } from 'react';
import { useState, useEffect, useRef } from 'react';
import {
  Form,
  Button,
  Col,
  Input,
  Popover,
  Progress,
  Alert,
  Row,
  Select,
  message,
  Typography,
} from 'antd';
import type { Store } from 'antd/es/form/interface';
import { Link, useRequest, history } from 'umi';
// import type {StateType} from './service';
import { doFindAccount } from '@/services/ant-design-pro/api';

import styles from './style.less';
const { Paragraph } = Typography;

const FormItem = Form.Item;
const { Option } = Select;
const InputGroup = Input.Group;

const passwordStatusMap = {
  ok: (
    <div className={styles.success}>
      <span>强度：强</span>
    </div>
  ),
  pass: (
    <div className={styles.warning}>
      <span>强度：中</span>
    </div>
  ),
  poor: (
    <div className={styles.error}>
      <span>强度：弱</span>
    </div>
  ),
};

const passwordProgressMap: {
  ok: 'success';
  pass: 'normal';
  poor: 'exception';
} = {
  ok: 'success',
  pass: 'normal',
  poor: 'exception',
};

const Register: FC = () => {
  const [count, setCount]: [number, any] = useState(0);
  const [visible, setVisible]: [boolean, any] = useState(false);
  const [account, setAccount]: [string, any] = useState();
  const [popover, setPopover]: [boolean, any] = useState(false);
  const confirmDirty = false;
  let interval: number | undefined;
  const [form] = Form.useForm();
  const formRef = useRef<FormInstance>();

  useEffect(
    () => () => {
      clearInterval(interval);
    },
    [interval],
  );

  const { loading: submitting, run: register } = useRequest<{
    data: API.Result<API.RegisterResult>;
  }>(doFindAccount, {
    manual: true,
    onSuccess: (data, params) => {
      setAccount(data);
      console.log(data);
    },
  });
  const onFinish = (values: Store) => {
    register(values);
  };

  return (
    <div className={styles.register}>
      <div className={styles.header}>找回账号</div>
      <div className={styles.main}>
        <Form
          form={form}
          name="UserRegister"
          onFinish={onFinish}
          initialValues={{
            username: '111',
            company: '',
            code: '',
            password: '111',
            confirm: '111',
          }}
        >
          <FormItem
            name="company"
            rules={[
              {
                required: true,
                message: '请输入公司名称!',
              },
            ]}
          >
            <Input size="large" placeholder="公司名称" />
          </FormItem>
          <FormItem
            name="code"
            rules={[
              {
                required: true,
                message: '请输入信用代码!',
              },
            ]}
          >
            <Input size="large" placeholder="信用代码" />
          </FormItem>
          {account && (
            <FormItem>
              <Alert message="账号找回成功" type="success" />
              <br />
              <Paragraph copyable={{ text: account }}>您的账号为:{account}</Paragraph>
            </FormItem>
          )}

          <FormItem>
            <Button size="large" loading={submitting} type="primary" htmlType="submit" block>
              <span>找回账号</span>
            </Button>
          </FormItem>
          <FormItem>
            <div
              style={{
                marginTop: 15,
                marginBottom: 24,
              }}
            >
              <Link to="/user/login">
                <span>返回登录</span>
              </Link>
              <Link
                style={{
                  float: 'right',
                }}
                to="/user/forget-password"
              >
                <span>找回密码</span>
              </Link>
            </div>
          </FormItem>
        </Form>
      </div>
    </div>
  );
};
export default Register;
